<include file="Base/header" />

<form action="{:U()}" method="post" class="form-horizontal js-ajax-forms" enctype="multipart/form-data">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table1">
        <tr>
            <th width="120">分类</th>
            <td>首页轮播</td>
            <td><input class="input" type="hidden" size="40" name="post[slide_cid]" value='1'  /></td>
        </tr>
        <tr>
            <th width="120">标题</th>
            <td><input class="input" type="text" size="40" name="post[slide_name]" /></td>
        </tr>
        <tr>
            <th>链接</th>
            <td><input class="input" type="text" size="80" name="post[slide_url]"  /></td>
        </tr>
		<tr>
            <th>类型：</th>
            <td>
                <foreach name='type' item='vo' key='k'>
                 <label class='radio' for="type_radio_{$k}">
                 	<input type="radio" id='type_radio_{$k}' class='type_btn' name='post[type]' value='{$k}' {$k == '1' ? checked : ''} />{$vo}
                 </label>
                </foreach>
      	   </td>
        </tr>

		<tr class='type ty_img'>
			<th>图片</th>
			<td>
                <div class="droparea spot" id="upimage_preview" style="background-image: url('');background-size: 220px 160px;" >
                    <div class="instructions" onclick="del_image()">删除</div>
                    <div id="upimage_btn"></div>
                    <input type="hidden" name="post[slide_pic]" id="upimage_value" value="" />
                </div>
			</td>
		</tr>
		
 
		<tr class='type ty_video' style='display:none'>
			<th>视频</th>
			<td>
			
	            <div id="uploader" class="wu-example" >
	                <div id="thelist" class="uploader-list"></div>
	                <div class="btns">
	                    <div id="video_picker">选择文件</div>
	                </div>
	                
		            <div class="droparea spot" id="video_preview" style='width: 300px;'>
	                    <div class="instructions" onclick="del_video()">删除</div>
	                    
	                    <input type="hidden" name="post[slide_video]" id="video_value" value="" />
	                </div>
		                <div>尽量上传不超过10M的mp4视频文件</div>
	            </div>
			</td>
		</tr>        
        <tr>
            <th>状态：</th>
            <td>
                <foreach name='status' item='vo' key='k'>
                 <label class='radio' for="radio_{$k}">
                 	<input type="radio" id='radio_{$k}' name='post[status]' value='{$k}' {$k == '1' ? checked : ''} />{$vo}
                 </label>
                </foreach>
      	   </td>
        </tr>

    </table>
<div class="commonBtnArea">
    <button class="btn js-ajax-submit"  type='submit'>提交</button>
</div>
</form>

                

<js href="--PUBLIC--/kindeditor/kindeditor-all-min.js,--PUBLIC--/kindeditor/lang/zh_CN.js"/>
<include file="Base/footer" />
<script type="text/javascript">
$('.type_btn').click(function(){
	var _curid = $(this).attr('id')
	var type = _curid == 'type_radio_1' ? 'img' : 'video';
	$('.type').hide();
	$('.ty_'+type).show();
	
})
  validateForm({
	      rule:{
	  		'post[slide_name]' : {required : 1},
	  		},
	      message:{
		'post[slide_name]' : {required : '请输入名称'},
		'post[slide_pic]' : {required : '请上传图片'}
	}
  },"{:U('index')}")
  
  
            var uploader = WebUploader.create({

                auto:true,
                // swf文件路径
                swf:  '__JS__/Uploader.swf',

                // 文件接收服务端。
              //  server: '__JS__/fileupload.php',
                server: "{:U('uploadFile')}",

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#video_picker',

                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false,
                chunked:true,
                chunkSize: 209715200,
                threads:1
            });
            

			uploader.on( 'fileQueued', function( file ) {
			    $("#video_picker").append( '<div id="' + file.id + '" class="item">' +
			        '<h4 class="info">' + file.name + '</h4>' + 
			        '<p class="state">等待上传...</p>' +
			    '</div>' );
			});
			
			// 文件上传过程中创建进度条实时显示。
			uploader.on( 'uploadProgress', function( file, percentage ) {
			    var $li = $( '#'+file.id ),
			        $percent = $li.find('.progress .progress-bar');
			
			    // 避免重复创建
			    if ( !$percent.length ) {
			        $percent = $('<div class="progress progress-striped active">' +
			          '<div class="progress-bar" role="progressbar" style="width: 0%">' +
			          '</div>' +
			        '</div>').appendTo( $li ).find('.progress-bar');
			    }
			
			    $li.find('p.state').text('上传中');
			
			    $percent.css( 'width', percentage * 100 + '%' ).text(parseInt(percentage*100)+"%");
			});            
            uploader.on( 'uploadSuccess', function( file ,response) {
            	if (response.status == 1) {
	                $('#video_value').val("__UPLOAD__/"+response.path);
	                $("#video_preview").append("<video src='__UPLOAD__/"+response.path+"' controls='controls' width='300' height='auto'></video>")
	                $( '#'+file.id ).find('p.state').text('上传完成！！');
            	}else{
            		alert(response.info);
            		if ($('#'+file.id)){
            			$('#'+file.id).remove();
            		}
            		return false;
            	}
            });

            $("#uploader").on('click','.del_file',function(){
                $(this).parent().remove();
            });

            uploader.on( 'uploadError', function( file ) {
                $( '#'+file.id ).find('p.state').text('上传出错');
            });

            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').fadeOut();
            });


  


 	//删除预览图
       function del_image(num){
           $('#upimage_preview').css('background-image','');
           $('#upimage_value').val('');
       }
	//删除预览图
      function del_video(){
          $('#video_preview video').attr('src','');
          $('#video_preview #video_value').val('');
      }
      $(function(){

          KindEditor.ready(function(K) {
              K.create();
              var editor = K.editor({
                  allowFileManager : true,
                  uploadJson:'--PUBLIC--/kindeditor/php/upload_json.php?dirname=slide_pic'
                  //sdl:false
              });
              K('#upimage_btn').click(function() {
                  editor.loadPlugin('image', function() {
                      editor.plugin.imageDialog({
                    	  showRemote : false,
                          imageUrl : K('#upimage_value').val(),
                          clickFn : function(url, title, width, height, border, align) {
                              $('#upimage_preview').css('background-image','url('+url+')').css('background-size','220px 160px');
                              K('#upimage_value').val(url);
                             // K('#getImgUrl').val(url);
                              editor.hideDialog();
                          }
                      });
                  });
              });
              
          });

      });
  </script>
</body>
</html>